<template>
  <div>
    <div style="margin-left: 20px;">
      <el-row v-if="contradiction.img">
        <el-col :span="24">
          <label style="display: inline-block;">图片：</label>
          <ul>
            <li v-for="(item, index) in contradiction.img" :key="index" style="display: inline-block; width: 150px; margin-left: 10px;">
              <!-- <span style="text-align: center;">{{ item.name }}</span> -->
              <el-image :src="item.url" fit="contain" @click="enlarge(item.url)">
                <div slot="placeholder" style="height: 100xp; width: 100px;">
                  <i style="font-size: 50px;" class="el-icon-loading" />
                </div>
              </el-image>
            </li>
          </ul>
        </el-col>
      </el-row>

      <el-row v-if="contradiction.video">
        <el-col :span="24">
          <label style="display: inline-block;">视频：</label>
          <ul>
            <li v-for="(item, index) in contradiction.video" :key="index" style="display: inline-block; width: 320px; margin-left: 10px;">
              <!-- <span style="text-align: center;">{{ item.name }}</span> -->
              <video width="320" height="240" :src="item.url" controls="controls">
                你的浏览器不支持
              </video>
            </li>
          </ul>
        </el-col>
      </el-row>

      <el-row v-if="contradiction.audio">
        <el-col :span="24">
          <label>音频：</label>
          <ul>
            <li v-for="(item, index) in contradiction.audio" :key="index" style="display: inline-block; width: 300px; margin-left: 10px;">
              <!-- <span style="text-align: center;">{{ item.name }}</span> -->
              <audio controls>
                <!-- <source src="horse.ogg" type="audio/ogg"> -->
                <source :src="item.url">
                您的浏览器不支持 audio 元素。
              </audio>
            </li>
          </ul>
        </el-col>
      </el-row>

      <el-row v-if="contradiction.file">
        <el-col :span="24">
          <label>文件：</label>
          <ul>
            <li v-for="(item, index) in contradiction.file" :key="index" style="display: inline-block; margin-left: 10px;">
              <a :href="item.url">{{ item.name }}<i class="el-icon-download" style="margin-left: 5px;" /></a>
            </li>
          </ul>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <label>描述：</label>
          <ul>
            <li style="display: inline-block; width: 100%;">
              <div v-html="contradiction.description" />
            </li>
          </ul>
        </el-col>
      </el-row>

      <el-row>
        <el-col v-if="contradiction.solveUserId == 9999 || contradiction.solveUserId == 9998 || contradiction.solveUserId == 9997" :span="24">
          <label>处理人：{{ contradiction.solveUserId | handleUser }}</label>
        </el-col>

        <!-- <el-col v-if="contradiction.solveUserId != 9999 && contradiction.solveUserId != 9998 && contradiction.solveUserId != 9997" :span="24"> -->
        <el-col :span="24">
          <label>记录：</label>
          <ul>
            <li style="display: inline-block; width: 100%;">
              <el-table
                v-loading="listLoading"
                size="mini"
                :data="contradictionRecordList"
                element-loading-text="Loading"
                border
                fit
                highlight-current-row
              >

                <el-table-column label="推送人" align="center">
                  <template slot-scope="scope">
                    <span>{{ scope.row.inputUserName }}</span>
                  </template>
                </el-table-column>

                <el-table-column label="单位" align="center">
                  <template slot-scope="scope">
                    <span v-if="scope.row.handleUserId != 9999 && scope.row.handleUserId != 9998 && scope.row.handleUserId != 9997">
                      {{ scope.row.institutionName }}
                    </span>
                    <span v-if="scope.row.handleUserId == 9999 || scope.row.handleUserId == 9998 || scope.row.handleUserId == 9997">
                      {{ scope.row.handleUserId | handleUser }}
                    </span>
                  </template>
                </el-table-column>

                <!-- <el-table-column label="备注" align="center">
                  <template slot-scope="scope">
                    <span>{{ scope.row.description }}</span>
                  </template>
                </el-table-column> -->

                <el-table-column label="推送时间" width="150" align="center">
                  <template slot-scope="scope">
                    <i class="el-icon-time" />
                    <span>{{ scope.row.inputTime | dateFilter }}</span>
                  </template>
                </el-table-column>

                <el-table-column label="处理时间" width="150" align="center">
                  <template slot-scope="scope">
                    <i v-if="scope.row.handleTime" class="el-icon-time" />
                    <span>{{ scope.row.handleTime | dateFilter }}</span>
                  </template>
                </el-table-column>

                <el-table-column class-name="status-col" width="70" label="状态" align="center">
                  <template slot-scope="scope">
                    {{ scope.row.status | statusFilter }}
                  </template>
                </el-table-column>

                <el-table-column label="操作" fixed="right" width="90" align="center">
                  <template slot-scope="scope">
                    <el-button size="mini" :disabled="scope.row.status == 0 ? true: false" @click="selectedContradictionRecord = scope.row; showHandleInfo = true">详情</el-button>
                  </template>
                </el-table-column>

              </el-table>
            </li>
          </ul>
        </el-col>
      </el-row>
    </div>

    <div style="display: flex; align-items:center; justify-content:center; margin-top: 20px;">
      <el-button @click="cancel">关闭</el-button>
    </div>

    <el-dialog title="处理详情" append-to-body :visible.sync="showHandleInfo" width="75%">
      <handleInfo v-if="showHandleInfo" :selected-contradiction-record="selectedContradictionRecord" @closeDialog="showHandleInfo = false" />
    </el-dialog>

    <el-dialog title="" append-to-body :visible.sync="showImage" top="10vh" width="75%">
      <div style="text-align: center;">
        <el-image :src="selectedImageUrl" fit="contain" />
      </div>
    </el-dialog>

  </div>
</template>

<script>
import request from '@/utils/request'
import { formatDate } from '@/utils/formatDate.js';
import handleInfo from './handleInfo.vue';

export default {
  filters: {
    dateFilter(date) {
      if (date == null) {
        return null;
      } else {
        return formatDate(new Date(date), 'yyyy-MM-dd hh:mm:ss');
      }
    },
    handleUser(id) {
      if (id == 9999) {
        return '两委';
      }
      if (id == 9998) {
        return '书记';
      }
      if (id == 9997) {
        return '乡贤';
      }
    },
    statusFilter(status) {
      if (status === 0) {
        return '待解决';
      }
      if (status === 1) {
        return '已解决';
      }
      if (status === 2) {
        return '未解决';
      }
    }
  },
  components: { handleInfo },
  props: ['selectedContradictionId'],
  data() {
    return {
      showImage: false,
      selectedImageUrl: '',
      selectedContradictionRecord: {},
      showHandleInfo: false,
      contradictionRecordList: [],
      listLoading: true,
      searchData: {
        currentPage: 1
      },
      contradiction: {}
    }
  },
  created() {
    this.getContradictionById();
    this.getcontradictionRecordListByContradictionId();
  },
  mounted() {

  },
  methods: {
    getcontradictionRecordListByContradictionId() {
      this.listLoading = true

      request({
        url: '/api/contradictionRecord/getcontradictionRecordListByContradictionId',
        method: 'get',
        params: { contradictionId: this.selectedContradictionId }
      }).then((res) => {
        this.contradictionRecordList = res.result;
        this.listLoading = false
      }).catch(() => {
        this.listLoading = false
      })
    },
    getContradictionById() {
      request({
        url: '/api/contradiction/getContradictionById',
        method: 'get',
        params: { id: this.selectedContradictionId }
      }).then((res) => {
        this.contradiction = res.result;
      }).catch(() => {

      })
    },
    enlarge(imgUrl) {
      this.selectedImageUrl = imgUrl;
      this.showImage = true;
    },
    cancel() {
      this.$emit('closeDialog');
    }
  }
};
</script>
<style scoped >

</style>
